<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./src/vue.js"></script>

</head>
<body>


<!--
    作用: 对一组数据进行循环 生成对应的数据结构
    语法:
        循环数组: v-for= "(item,index) in arr"
        循环对象: v-for= "(value,key,index) in object"
        object.keys() ==> index
-->

<div id="app">
    <div v-for="item,index in fruit">
        {{index}} : {{item}}
    </div>

    <div v-for="item,index in students">
        {{index}} : {{item}}
        <div v-for="value,key,index in item">
            {{key}} : {{value}}
        </div>

    </div>

</div>


<script>

    new Vue({
        el: '#app',
        data: {
            fruit: ["苹果", "桃子", "西瓜"],
            students: [{
                name: "zhangsan",
                age: 18
            }, {
                name: "lisi",
                age: 19
            }, {
                name: "wangwu",
                age: 12
            }]
        }

    })

</script>


</body>
</html>